import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Select, Tag, Popover, Card, Row } from "antd";
// http
import http from '../../../utils/request';

const { Option } = Select;

class HostFamily extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "云平台", dataIndex: "platform", key: "platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "region", key: "region"},
                {title: "类型", dataIndex: "instance_type_family", key: "instance_type_family"},
                {title: "规格ID", dataIndex: "instance_id", key: "instance_id"},
                {title: "价格", dataIndex: "price", key: "price", width: "400px",
                    render: (text, rowData) => {
                        return(
                            <div>
                            {rowData.price.map((item, index) =>(
                                <Card>
                                    <Tag color="#2db7f5">{item.name}</Tag>
                                    <Row>
                                        <Col span={8}>实付款: <font style={{color: "green"}}>{item.trade_price}</font></Col>
                                        <Col span={8}>官网价: {item.original_price}</Col>
                                        <Col span={8}>优惠价: {item.discount_price}</Col>
                                    </Row>
                                    <p>合同: {String(item.rules)}
                                    </p> 
                                </Card>
                            ))}
                            </div>
                        )
                    }
                },
                {title: "配置", dataIndex: "cpu_core_count", key: "cpu_core_count",
                render: (text, rowData) => {
                    return(
                        <div>
                            {rowData.cpu_core_count}C{rowData.memory_size}G {rowData.disk_type}
                                {/* <Row>
                                    <Col span={8}>CPU: {rowData.cpu_core_count}</Col>
                                    <Col span={8}>内存: {rowData.memory_size}</Col>
                                    <Col span={8}>磁盘: {rowData.disk_type}</Col>
                                </Row> */}
                        </div>
                    )
                }
                },
                // {title: "CPU", dataIndex: "cpu_core_count", key: "cpu_core_count"},
                // {title: "内存 (G)", dataIndex: "memory_size", key: "memory_size"},
                {title: "出/入带宽 (Mb/s)", dataIndex: "instance_bandwidth_tx", key: "instance_bandwidth_tx"},
                {title: "出/入包数 (个/s)", dataIndex: "instance_pps_tx", key: "instance_pps_tx"},
                // {title: "磁盘", dataIndex: "disk_type", key: "disk_type"},
            ],
            loading: false,
            visible_edit_id: '',
            visible_edit_name: '',
            visable_edit_code: '',
            cloud_region_id: '',
            search_option_account: [],
            search_option_region: [],
            platform_list_option: [],
            family_type_list_option: [],
            family_cpu_list_option: [],
            family_mem_list_option: [],

            search_family_type: null,
            search_family_cpu: null,
            search_family_mem: null,
            search_region: null,
            search_platform: null,
            search_account_name: null,
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataCloudPlatform()
        this.loadDataCloudHostCpu()
        this.loadDataCloudHostMemory()
        this.loadDataCloudHostFamilyType(null)
    }

    loadDataCloudHostCpu = () => {
        const requestData = {
            operation_type: 'get_family_cpu_list',
        }
        http.patch('/cloud/host_family', {params: requestData}).then(response=>{
            console.log(response.data)
            const resp_data = response.data.data
            const family_cpu_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                family_cpu_list_option.push(<Option key={resp_data[i]}>{resp_data[i]}</Option>)
            }
            this.setState({
                family_cpu_list_option: family_cpu_list_option,
            })
        })
    }

    loadDataCloudHostMemory = () => {
        const requestData = {
            operation_type: 'get_family_mem_list',
        }
        http.patch('/cloud/host_family', {params: requestData}).then(response=>{
            console.log(response.data)
            const resp_data = response.data.data
            const family_mem_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                family_mem_list_option.push(<Option key={resp_data[i]}>{resp_data[i]}</Option>)
            }
            this.setState({
                family_mem_list_option: family_mem_list_option,
            })
        })
    }

    loadDataCloudHostFamilyType = (value) => {
        const requestData = {
            operation_type: 'get_family_type_list',
            platform: value
        }
        http.patch('/cloud/host_family', {params: requestData}).then(response=>{
            console.log(response.data)
            const resp_data = response.data.data
            const family_type_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                family_type_list_option.push(<Option key={resp_data[i]}>{resp_data[i]}</Option>)
            }
            this.setState({
                family_type_list_option: family_type_list_option,
            })
        })
    }

    loadDataCloudPlatform = () => {
        // 获取云平台列表
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            
            const platform_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                platform_list_option.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                platform_list_option: platform_list_option,
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'platform': this.state.search_platform,
            'account_name': this.state.search_account_name,
            'region': this.state.search_region,
            'instance_type_family': this.state.search_family_type,
            'cpu_core_count': this.state.search_family_cpu,
            'memory_size': this.state.search_family_mem,
        }

        http.get('/cloud/host_family', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 云搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_region: data.region,
            search_platform: data.platform,
            search_account_name: data.account_name,
            search_family_type: data.family_type,
            search_family_cpu: data.family_cpu,
            search_family_mem: data.family_mem
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({search_instance_platform: value})

            const requestData = {'page': 1, 'limit': 1000, 'platform': value}
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })
    
            http.get('/cloud/region', {params: requestData}).then(response=>{
                const search_option_region = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_region.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_region: search_option_region
                })           
            })

        } else {
            this.setState({
                search_option_account: [],
                search_option_region: [],
            })
        }
    }

    // 搜索实例族
    onChangeFamilyType = (value) => {
        if (value) {
            this.setState({search_family_type: value})
        } else {
            this.setState({search_family_type: null})            
        }
    }

    // 搜索CPU
    onChangeFamilyCpu = (value) => {
        if (value) {
            this.setState({search_family_cpu: value})
        } else {
            this.setState({search_family_cpu: null})            
        }
    }

    // 搜索MEM
    onChangeFamilyMem = (value) => {
        if (value) {
            this.setState({search_family_mem: value})
        } else {
            this.setState({search_family_mem: null})            
        }
    }

    render(){
        const { loading, dataSource, columns, page, total, platform_list_option, family_type_list_option, family_cpu_list_option, family_mem_list_option, search_option_account, search_option_region } = this.state
        // const rowSelection = {
        //     onChange: this.onCheckbox
        // }
        const content = <div>
                <br />
                <div></div>
                <font color="green">区域</font>
                <div>相同折扣的账户不同区域下的实例费用是不同的，如杭州比张家口贵一些</div>
                <br />
                <font color="green">价格</font>
                <div>价格分为1月/1年/3年的费用，所有的价格基于当前规格+(高效|ESSD)40G云盘的费用</div>
                <br />
                <font color="green">规格</font>
                <div>相同的CPU、内存配置有不同规格，对应了不同的传输带宽，网络包还有价格</div>
                <br />
            </div>
        var myStyle = {margin: '20px'}
        var myStyle2 = {float:"right", margin: "20px"}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">

                    <Form.Item label="云平台" name="platform" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 140 }}
                            placeholder="请选择平台"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {platform_list_option}
                        </Select>
                    </Form.Item>

                    <Form.Item label="云账户" name="account_name" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 140 }}
                            placeholder="选择云账户"
                            >
                            {search_option_account}
                        </Select>
                    </Form.Item>

                    <Form.Item label="云区域" name="region" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 140 }}
                            placeholder="选择云区域"
                            >
                            {search_option_region}
                        </Select>
                    </Form.Item>

                    <Form.Item label="规格" name="family_type" style={myStyleForm}>
                        <Select
                                allowClear
                                showSearch
                                style={{ width: 140 }}
                                placeholder="请选择实例规格"
                                optionFilterProp="children"
                                onChange={this.onChangeFamilyType}
                                filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {family_type_list_option}
                        </Select>
                    </Form.Item>

                    <Form.Item label="CPU" name="family_cpu" style={myStyleForm}>
                        <Select
                                allowClear
                                // showSearch
                                style={{ width: 140 }}
                                placeholder="请选择CPU"
                                optionFilterProp="children"
                                onChange={this.onChangeFamilyCpu}
                                filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {family_cpu_list_option}
                        </Select>
                    </Form.Item>

                    <Form.Item label="内存" name="family_mem" style={myStyleForm}>
                        <Select
                                allowClear
                                // showSearch
                                style={{ width: 140 }}
                                placeholder="请选择内存"
                                optionFilterProp="children"
                                onChange={this.onChangeFamilyMem}
                                filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {family_mem_list_option}
                        </Select>
                    </Form.Item>

                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                {/* <div style={myStyle2}>
                    <br />
                    <font color="green">折扣</font>
                    <div>合同折扣: 阿里云优惠合同账户</div>
                    <div>普通折扣: 聚石塔及阿里云非合同账户</div>
                    <br />
                    <div></div>
                    <font color="green">区域</font>
                    <div>相同折扣的账户不同区域下的实例费用是不同的，如杭州比张家口贵</div>
                    <br />
                    <font color="green">价格</font>
                    <div>价格分为1月/1年/3年的费用，所有的价格基于当前规格+高效40G云盘的费用</div>
                    <br />
                </div> */}

                <div style={myStyle2}>                
                    <Popover content={content} title="提示" trigger="hover">
                        <Button>规格说明</Button>
                    </Popover>
                </div>


                <Table
                    pagination={false} 
                    // rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 1200 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}
export default HostFamily;